<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: lxc
 * @Date: 2020-12-18 17:05:32
 * @LastEditors: lxc
 * @LastEditTime: 2020-12-23 20:14:15
-->
<template>
  <div>
    <p @click="editClassify()">添加分类</p>
    <table border='1'>
      <tr>
        <th>分类名称</th>
        <th>排序</th>
        <th>创建日期</th>
        <th>操作</th>
      </tr>
      <tr
        v-for="(item,index) in dataList"
        :key="index"
      >
        <td>{{item.name}}</td>
        <td>{{item.sort}}</td>
        <td>{{item.date}}</td>
        <td>
          <span @click="deleteClassify(item)">删除</span>
          <span @click="editClassify(item)">编辑</span>
        </td>
      </tr>
    </table>
    <a-modal
      title="Title"
      v-model:visible="showEdit"
      @ok="handleOk"
    >
      <a-form
        :model="tmpClassify"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="分类名称">
          <a-input v-model:value="tmpClassify.name" />
        </a-form-item>
        <a-form-item label="排序">
          <a-input-number
            size="large"
            :min="1"
            :max="100"
            v-model:value="tmpClassify.sort"
            @change="onChange"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="javascript">
import {
  getClassifyList,
  addEidtClassify,
  delClassify
} from "../../api/index.ts";
import {
  reactive,
  toRefs,
  watch,
  computed,
  ref,
  onMounted,
  watchEffect
} from "vue";
import { message } from "ant-design-vue";
export default {
  components: {},
  setup() {
    const state = reactive({
      dataList: [],
      showEdit: false
    });
    const tmpClassify = reactive({
      name: "",
      sort: null,
      id: 0
    });
    const onChange = () => {};
    const handleOk = async () => {
      let res = await await addEidtClassify(tmpClassify);
      message.success(res.msg);
      let data = await getClassifyList();
      state.dataList = data;
      state.showEdit = false;
    };
    const deleteClassify = async item => {
      let id = item._id;
      let res = await delClassify({ id });
      message.success(res.msg);
      let data = await getClassifyList();
      state.dataList = data;
    };
    const editClassify = item => {
      if (item) {
        tmpClassify.name = item.name;
        tmpClassify.sort = item.sort;
        tmpClassify.id = item._id;
      } else {
        tmpClassify.name = "";
        tmpClassify.sort = 1;
        tmpClassify.id = 0;
      }
      state.showEdit = true;
    };
    onMounted(() => {
      getClassifyList({name:'抽'}).then(res => {
        state.dataList = res;
      });
    });
    return {
      ...toRefs(state),
      editClassify,
      onChange,
      tmpClassify,
      handleOk,
      deleteClassify
    };
  }
};
</script>
